import { Component } from 'react';
import './LanguageChoose.css';

export default class LanguageChoose extends Component {
    state = {
        value: 'javascript',
        opacity: '0',
        zIndex: '0',
    }

    changeLanguage = (value) => {
        return () => {
            this.props.handleSelected(value);
            this.setState({ value: value });

        }

    }

    handleSelect_item_b = () => {
        this.setState({ opacity: '1', zIndex: '4' })
    }

    handleSelect_item_n = () => {
        this.setState({ opacity: '0' })
    }

    render() {
        const { value, opacity, zIndex } = this.state;
        return (
            <div className="select" onBlur={this.handleSelect_item_n}>
                <div className="select_default" onFocus={this.handleSelect_item_b} tabIndex="0" >{value}</div>
                <ul className="select_item" onClick={() => { this.setState({ zIndex: '0' }) }} style={{ opacity: opacity, zIndex: zIndex }}>
                    <li onClick={this.changeLanguage('javascript')} >javascript</li>
                    <li onClick={this.changeLanguage('xml')} >xml</li>
                    <li onClick={this.changeLanguage('python')} >python</li>
                </ul>
            </div>
        )
    }
}